import React, { FC, useMemo, useRef } from "react";
import styles from "./StatHeader.module.scss";
import { useNavigate, useParams } from "react-router-dom";
import {
  Space,
  Button,
  Typography,
  Input,
  Tooltip,
  InputRef,
    message,
  Popover
} from "antd";
import { QRCodeCanvas } from "qrcode.react";
import { CopyOutlined, LeftOutlined, QrcodeOutlined } from "@ant-design/icons";
import useGetPageInfo from "../../../hooks/useGetPageInfo";
const { Title } = Typography;
const StatHeader: FC = () => {
  const { id } = useParams();
  const nav = useNavigate();
  const { title, isPublished } = useGetPageInfo();
  const urlInputRef = useRef<InputRef>(null);

  // const genLinkMain = () => {
  //   if (!isPublished) return null;
  //   //拼接url,参考C端
  //   const url = `http://localhost:3000/question/${id}`;
  //   const QRCodeElem = () => {
  //     return (
  //       <div style={{textAlign:'center'}}>
  //         <QRCodeCanvas value={url} size={150} />
  //       </div>
  //     );
  //   };
  //   const copyLink = () => {
  //     const elem = urlInputRef.current;
  //     if (elem == null || elem.input == null) return;
  //     elem.select();
  //     //已被弃用,可正常使用
  //     //   document.execCommand("copy");
  //     navigator.clipboard
  //       .writeText(elem.input.value)
  //       .then(() => {
  //         message.success("复制成功");
  //       })
  //       .catch((err) => {
  //         throw new Error("无法复制");
  //       });
  //   };
  //   return (
  //     <Space>
  //       <Input ref={urlInputRef} value={url} style={{ width: "280px" }}></Input>
  //       <Tooltip title="复制链接">
  //         <Button icon={<CopyOutlined />} onClick={copyLink}></Button>
  //       </Tooltip>
  //       <Popover content={QRCodeElem}>
  //         <Button icon={<QrcodeOutlined/>}></Button>
  //       </Popover>
  //     </Space>
  //   );
  // };
  //使用useMemo 依赖项是否频繁变化  缓存元素是否创建成本高
  const LinkAndQRCodeElem = useMemo(() => {
    if (!isPublished) return null;
 //拼接url,参考C端
    const url = `http://localhost:3000/question/${id}`;
    const QRCodeElem = () => {
      return (
        <div style={{textAlign:'center'}}>
          <QRCodeCanvas value={url} size={150} />
        </div>
      );
    };
    const copyLink = () => {
      const elem = urlInputRef.current;
      if (elem == null || elem.input == null) return;
      elem.select();
      //已被弃用,可正常使用
      //   document.execCommand("copy");
      navigator.clipboard
        .writeText(elem.input.value)
        .then(() => {
          message.success("复制成功");
        })
        .catch((err) => {
          throw new Error("无法复制");
        });
    };
    return (
      <Space>
        <Input ref={urlInputRef} value={url} style={{ width: "280px" }}></Input>
        <Tooltip title="复制链接">
          <Button icon={<CopyOutlined />} onClick={copyLink}></Button>
        </Tooltip>
        <Popover content={QRCodeElem}>
          <Button icon={<QrcodeOutlined/>}></Button>
        </Popover>
      </Space>
    );
  },[id,isPublished])
  return (
    <div className={styles["header_wrapper"]}>
      <div className={styles.header}>
        <div className={styles.left}>
          <Space>
            <Button type="link" icon={<LeftOutlined />} onClick={() => nav(-1)}>
              返回
            </Button>
            <Title
              style={{ fontSize: "17px", marginBottom: "0", lineHeight: "1" }}
            >
              {title}
            </Title>
          </Space>
        </div>
        <div className={styles.main}>{LinkAndQRCodeElem}</div>
        <div className={styles.right}>
          <Button type="primary" onClick={() => nav(`/question/edit/${id}`)}>
            编辑问卷
          </Button>
        </div>
      </div>
    </div>
  );
};
export default StatHeader;
